<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@include file="../include/include-head.jsp" %>
    <link rel="stylesheet" href="ztree/zTreeStyle.css"/>
    <script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript">
        $(function () {

            // 给向右添加元素的按钮绑定单击响应事件
            $("#toRightBtn").click(function () {

                // select: 标签选择器
                // eq(0)： 页面第一个元素， 同理  eq(1) 页面第二个元素
                // “>”：子元素选择器
                // selected: 表示被选中的 option
                // appendTo 将jQuery 对象添加到指定位置
                $("select:eq(0)>option:selected").appendTo($("select:eq(1)"));
            });


            // 给向左添加元素的按钮绑定单击响应事件
            $("#toLeftBtn").click(function () {

                $("select:eq(1)>option:selected").appendTo($("select:eq(0)"));
            });


            // 通过给保存按钮绑定单击响应函数，来实现提交时选中下拉列表中所有的值
            $("#saveBtn").click(function () {

                $("select:eq(1)>option").prop("selected", "selected");
            });

        });
    </script>
</head>

<body>

<%@include file="../include/include-nav.jsp" %>

<div class="container-fluid">
    <div class="row">
        <%@include file="../include/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="admin-main-to-page.html">首页</a></li>
                <li><a href="admin-to-user-page.html">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form action="save-admin-role-relationship.html" method="post" role="form" class="form-inline">
                        <input type="hidden" name="adminId" value="${param.adminId }"/>
                        <input type="hidden" name="pageNum" value="${param.pageNum }"/>
                        <input type="hidden" name="keyword" value="${param.keyword }"/>
                        <div class="form-group">
                            <label for="unAssignedRoles">未分配角色列表</label><br>
                            <select id="unAssignedRoles" class="form-control" multiple="" size="10"
                                    style="width:100px;overflow-y:auto;">
                                <c:forEach items="${requestScope.unAssignedRoleList }" var="role">
                                    <option value="${role.id }">${role.name }</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li id="toRightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li id="toLeftBtn" class="btn btn-default glyphicon glyphicon-chevron-left"
                                    style="margin-top:20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label for="assignedRoles">已分配角色列表</label><br>
                            <select id="assignedRoles" name="roleIdList" class="form-control" multiple="" size="10"
                                    style="width:100px;overflow-y:auto;">
                                <c:forEach items="${requestScope.assignedRoleList }" var="role">
                                    <!-- option标签中得value 提交给服务器 -->
                                    <option value="${role.id }">${role.name }</option>
                                </c:forEach>
                            </select>
                        </div>
                        <button id="saveBtn" style="width: 150px; margin: 10px 0px 0px 180px"
                                class="btn btn-lg btn-success btn-block">保存
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>